<template>
    <div id="app">
        <Head>技能专长</Head>
        <div class="line" @click="show=true">
            <div class="title">技能名称</div>
            <div class="select" :class="sub.name?'sel':''">
                {{sub.name?sub.name:'请选择'}}
                <van-icon name="arrow" class="ic_right"/>
            </div>
        </div>
        <div class="line" @click="showtwo=true">
            <div class="title">熟悉程度</div>
            <div class="select" :class="sub.degree_str?'sel':''">
                {{sub.degree_str?sub.degree_str:'请选择'}}
                <van-icon name="arrow" class="ic_right"/>
            </div>
        </div>
        <div class="btn" @click="save">保&nbsp;&nbsp;存</div>

        <van-popup v-model="show" round position="bottom" class="popup" >
            <van-picker
                title="技能"
                show-toolbar
                :columns="columnSkill"
                @confirm="onConfirmSkill"
                @change="onChangeSkill"
                @cancel="show=false"
                />
            <div class="add" @click="addskillname">没找到我的技能，立即填写</div>
        </van-popup>
        <van-popup
        v-model="skillname"
        position="right"
        duration="0.2"
        :overlay="true"
        :style="{ height: '100%', width: '100%' }"
        >
            <Skill
                @hideSkill="toggle"
                @doSkill="doSkill"
            ></Skill>
        </van-popup>
        <van-popup v-model="showtwo" round position="bottom" class="popup" >
            <van-picker
                title="熟悉程度"
                show-toolbar
                :columns="['入门','熟练','精通']"
                @confirm="onConfirmLevel"
                @cancel="showtwo=false"
                />
        </van-popup>
    </div>
</template>
<script>
import Vue from 'vue'
import { Icon } from 'vant'
import http from '@/utils/http'
import api from '@/api'
import Skill from '@/components/freelance/specialtyname'

Vue.use(Icon)
export default {
  components: {
    Skill
  },
  data () {
    return {
      show: false,
      showtwo: false,
      skillname: false,
      sub: {
        id: '',
        skill1: 0,
        skill2: 0,
        name: '',
        newname: '',
        degree: '',
        degree_str: ''
      },
      columnSkill: [],
      skillStart: '',
      skillDefaultIndex1: 0,
      skillDefaultIndex2: 0,
      skillOrArr: [],
      skillArr: []
    }
  },
  created () {
    if (this.$route.query.id && this.$route.query.id != 'null') {
      this.sub.id = this.$route.query.id
    }
    // 请求数据
    this.fetchData()
    // 请求所有技能
    this.skill()
  },
  methods: {
    onLoad () {

    },
    fetchData () {
      http.get(api.get_item, {id: this.sub.id, type: 1})
        .then(res => {
          this.sub.skill1 = res.data.pid
          this.sub.skill2 = res.data.skill_id
          if (res.data.custom_name) {
            this.sub.name = res.data.custom_name
          } else {
            this.sub.name = `${res.data.p_title}-${res.data.title}`
          }
          this.sub.newname = res.data.custom_name
          this.sub.degree = res.data.level
          if (res.data.level == 1) {
            this.sub.degree_str = '入门'
          } else if (res.data.level == 2) {
            this.sub.degree_str = '熟练'
          } else {
            this.sub.degree_str = '精通'
          }
        }).catch(() => {})
    },
    skill () {
      http.get(api.skill_list)
        .then(res => {
          this.skillOrArr = [...res.data]
          let dataArray = [...res.data]
          let majorPArray = []
          let majorSArray = []
          let commitArray = []
          for (let majorP of dataArray) {
            majorSArray = []
            for (let majorS of majorP.children) {
              majorSArray.push(majorS.label)
            }
            majorPArray[majorP.label] = majorSArray
          }
          commitArray = majorPArray
          this.skillArr = commitArray
          this.columnSkill = [
            {
              values: Object.keys(commitArray),
              defaultIndex: this.skillDefaultIndex1
            },
            {
              values: commitArray[this.skillStart],
              defaultIndex: this.skillDefaultIndex2
            }
          ]
        }).catch(() => {})
    },
    // 选择技能
    onChangeSkill (picker, values) {
      picker.setColumnValues(1, this.skillArr[values[0]])
    },
    // 选择技能
    onConfirmSkill (values, index) {
      this.sub.skill1 = this.skillOrArr[index[0]].value
      this.sub.skill2 = this.skillOrArr[index[0]].children[index[1]].value
      this.sub.name = `${values[0]}-${values[1]}`
      this.sub.newname = ''
      this.show = !this.show
    },
    addskillname () {
      this.show = false
      this.skillname = true
    },
    toggle () {
      this.skillname = false
    },
    // 新添技能名称
    doSkill (data) {
      this.sub.skill1 = ''
      this.sub.skill2 = ''
      this.sub.name = ''
      this.sub.name = data.skillName
      this.sub.newname = data.skillName
    },
    onConfirmLevel (values, index) {
      this.sub.degree = index + 1
      this.sub.degree_str = values
      this.showtwo = !this.showtwo
    },
    save () {
      if (!this.sub.name) {
        this.$notify('请填写名称')
        return false
      }
      if (!this.sub.degree) {
        this.$notify('请填写熟悉程度')
        return false
      }
      http
        .post(api.save_skill, {
          id: this.sub.id,
          skill_id: this.sub.skill2,
          level: this.sub.degree,
          custom_name: this.sub.newname
        })
        .then(res => {
          if (parseInt(res.code) === 200) {
            this.$notify({ type: 'success', message: res.message })
            this.$router.push({ path: '/freelance/specialty' })
          } else {
            this.$notify(res.message)
          }
        }).catch(err => {
          console.log(err)
        })
    }

  }
}
</script>
<style lang="scss" scoped>
.line{
    height: 60px;
    background-color: #ffffff;
    border-left: 18px solid #ffffff;
    border-right: 18px solid #ffffff;
    border-bottom: 1px solid #f2f2f2;
    display: flex;
    align-items: center;
    position: relative;
    .title{
        line-height: 1;
        font-size: 15px;
        color: #2a3140;
        position: relative;
    }
    .select{
        max-width: calc(100vw - 120px);
        position: absolute;
        right: 0px;
        color: #888c94;
        font-size: 15px;
        display: flex;
        align-items: center;
        &.sel{
            color: #0f141d;
        }
    }
}
.btn{
    margin-top: 65px;
    margin-left: 21px;
    width: calc(100vw - 42px);
    height: 47px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    color: #464646;
    border-radius: 50px;
    background-color: #fed700;
    box-shadow: 0px 1px 7px rgba($color: #fed700, $alpha: 0.8);
}
.popup{
    height: 279px;
    .add{
        width: 100vw;
        height: 50px;
        background-color: #ffffff;
        position: absolute;
        padding-top: 20px;
        font-size: 15px;
        color: #0860ff;
        text-align: center;
        z-index: 10;
    }
}
</style>
